<template>
  <!-- 设置密码 -->
  <div class="setPassword">
    <img class="back" src="@/assets/img/icons/black/back.svg" @click="$router.back()" />
    <div class="title">请设置密码</div>
    <div class="tip">
      <span>8-20个字符，不可以是纯数字</span>
    </div>
    <div class="input-box">
      <input class="input" v-model="password" type="password" placeholder="请输入密码" />
      <img v-show="password" class="clear" src="@/assets/img/icons/clear.svg" @click="password = ''" />
    </div>
    <k-button
      class="complete"
      :disable="password.length < 8"
      :bgColor="password.length >= 8 ? 'primary' : '#DFDFDF'"
      fontColor="#FFFFFF"
      fontSize="0.16rem"
      radius="0.03rem"
      @click="btnClick"
      >完成
    </k-button>
  </div>
</template>

<script>
export default {
  name: 'setPassword',
  data() {
    return {
      password: '', //用户输入密码
    }
  },
  methods: {
    //完成设置密码
    btnClick() {
      //设置密码
      this.$network
        .main('setPassword', this.password)
        .then((data) => {
          this.$toast({
            type: 'success',
            message: '修改成功',
          })
          this.$updateUserInfo() //更新用户信息
          this.$router.back() //返回
        })
        .catch((err) => {
          this.$toast({
            type: 'fail',
            message: err,
          })
        })
    },
  },
}
</script>

<style scoped src="./index.css"></style>
